<template>
    
    <div class="container-login">
        <el-card>
            <!-- ref="form" 当ref标识普通标签的时候获取dom 当ref标识组件的时候获取组件实例 -->
            <img class="logo" src="../../assets/logo_index.png" alt="">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
                <el-form-item prop="mobile">
                    <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input style="width:240px;margin-right:8px" v-model="loginForm.code" placeholder="请输入验证码"></el-input>
                    <el-button>发送验证码</el-button>
                </el-form-item>
                <el-form-item>
                    <el-checkbox :value="true">我已阅读并同意用户协议和隐私条款</el-checkbox>
                </el-form-item>
                <el-form-item>
                   <el-button @click="login()" type="primary" style="width:100%">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>
<script>
import auth from '@/utils/auth.js'
export default {
    // 当时路由来渲染组件，会使用name指定的组件名称，没指定默认是文件的名称
    //组件名称
    name:'login-page',
    data(){
        const checkMobile = (rule , value , callback) => {
            // 进行校验，校验逻辑：1开头 + 第二位数字（3-9） + 9位数字结尾
            if(!/^1[3-9]\d{9}$/.test(value)) return callback(new Error('手机号不正确'));
            callback();
        }
        return {
         // 建议：和后台接口需要的字段保存一致，目的将来直接提交该对象即可
            loginForm : {
                mobile:'13911111111',
                code:'246810'
            },
            loginRules:{
                mobile:[
                // required: true 必填规则，message不符合规则时提示，trigger 何时触发校验 , blur:失去焦点触发
                    {required:true,message:'请输入手机号',trigger:'blur'},
                    //自定义校验
                    {validator:checkMobile,trigger:'blur'}
                ],
                code : [
                    {required:true,message:'请输入验证码',trigger:'blur'},
                    {len:6,message:'请输入6个字符',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        login () {
            // 使用async和await改写
            this.$refs.loginForm.validate(async (valid)=>{
                if(valid){
                    //校验成功进行登录 
                    // this.$http.post('/authorizations',this.loginForm).then(res=>{
                    //     // 登陆成功后保存用户信息和返回的token
                    //     auth.setUser(res.data.data);
                    //     this.$router.push('/')
                    // }).catch(()=>{
                    //     this.$message.error('手机号或验证码错误')
                    // })
                    
                    // 使用try catch进行异常捕获
                    try{
                        // 发送异步请求
                        const res = await this.$http.post('authorizations',this.loginForm);
                        auth.setUser(res.data.data);
                        this.$router.push('/')
                    }catch(e){
                        this.$message.error('手机号或验证码错误')
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.container-login {
    width: 100%;
    height: 100%;
    // cover: 铺满容器
    background: url(../../assets/login_bg.jpg) no-repeat center / cover;
    position: absolute;
    left: 0;
    top: 0;
    .el-card {
        width: 400px;
        height:350px ;
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%,-50%);
        .logo {
            width: 200px;
            display: block;
            margin: 0 auto 20px;
        }
    }
}

</style>


